<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>其他</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<ion-content class="other-detail">
    <div class="top">

        <!-- 两边基础部分参数项 -->
        <div class="border">
            <div *ngFor="let data of typeData,let i = index">
                <label>{{ data.fireDeviceTypeName }}</label>
                <p>
                    <span [ngClass]="{ 'data-total': data.deviceTotalCount }">{{ data.deviceTotalCount || 0 }}</span>
                    <span [ngClass]="{ 'data-nomal': data.deviceTotalCount - data.alarmCount }">{{ data.deviceTotalCount - data.alarmCount || 0 }}</span>
                    <span [ngClass]="{ 'data-break': data.alarmCount }">{{ data.alarmCount || 0 }}</span>
                </p>
            </div>
        </div>

        <!-- 中间部分告警数据 -->
        <div class="mid">
            <section>
                <div class="Text-init">
                    <div class="fire-alarm-info" *ngFor="let alarmInfo of alarmInfos">
                        <span>{{ alarmInfo.alarmTime }}</span>
                        <p>{{ alarmInfo.areaName }} {{ alarmInfo.deviceName }} {{ alarmInfo.alarmName }}</p>
                    </div>
                </div>
            </section>
        </div>

    </div>

    <!-- 底部数据栏 -->
    <div class="bottom">
        <div class="bottom-item" *ngFor="let data of typeData" [ngStyle]="{display: data.deviceDetialInfo.length? 'block' : 'none'}">
            <div class="sub-title">
                <span>{{ data.fireDeviceTypeName }}</span>
                <span *ngIf="data.alarmCount">
                    <i [ngClass]="{ 'data-break': data.alarmCount }">{{ data.alarmCount || 0 }}</i> 
                    <span>告警点</span>
                </span>
            </div>
            <div class="sub-content">
                <div *ngFor="let item of (data.deviceDetialInfo | listLength: 0:4), let i =index" [ngClass]="{ 'breakbg': item && item.isAlarm,'noBorder': i === i }">
                    <p *ngIf="item">{{ item.deviceName }}</p>
                    <span *ngIf="item">
                        <p  [ngClass]="{ only: item.params && item.params.length === 1 }" *ngFor="let items of item.params"><em>{{ items && items.valueName ? items.valueName: items.value }}</em>{{ items && items.valueName ? '': items.unit }}</p>
                    </span>
                    <i [ngStyle]="{ display: item && item.isPen? 'block' : 'none' }">{{ item && item.isPen && item.isPen.valueName ? item.isPen.valueName: '0' }}</i>
                </div>
                <span></span>
            </div>
        </div>
    </div>
</ion-content>